<template>
	<!-- 企业名录详情页 -->
	<view class="app">
		<!-- 吸顶搜索栏 -->
		<view class="top-bar sticky-tabs">
			<u-icon class="icon" name="arrow-left" color="#eee" size="64" @click="vk.navigateBack"></u-icon>
			<view class="search-bar">
				公司主页
			</view>
			<u-icon class="icon" name="more-dot-fill" color="#eee" size="64"
				@click="toMore()"></u-icon>
		</view>
		<!-- 详情 -->
		<view class="main">
			<view class="title-bar">
				<view class="imglist-item">
					<image class="thumb" :src="formData.images" mode=""></image>
					<view class="text-bar">
						<text class="title common-text common-text-row2">{{formData.name}}</text>
						<text class="text">{{formData.vip_level}}</text>
					</view>
				</view>
			</view>
			
			<!-- 功能按钮 -->
			<view class="section">
				<view class="grid-bar">
					<view class="grid-item4" @click="clickMenu(1)">
						<u-icon name="car" color="#666" size="64"/>
						<view class="">供应产品</view>
					</view>
					<view class="grid-item4" @click="clickMenu(2)">
						<u-icon name="order" color="#666" size="64"/>
						<view class="">采购清单</view>
					</view>
					<view class="grid-item4" @click="clickMenu(3)">
						<u-icon name="photo" color="#666" size="64"/>
						<view class="">公司相册</view>
					</view>
				</view>
			</view>
			
			<view class="section">
				<view class="section-title-bar">
					<u-section title="产品推荐" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold"
						:color="sectionColor" :line-color="sectionLineColor" :show-line="true" :arrow="false"
						@click="pageTo('/pages/product/list')"></u-section>
				</view>
				<!-- 数据列表 -->
				<view class="imglist-bar">
					<view class="imglist-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
						<view class="thumb">
							<image class="" :src="item.images" mode=""></image>
						</view>
						<view class="text-bar">
							<text class="title common-text common-text-row2">{{item.title}}</text>
							<text class="text2 common-text">{{item.supplier}}</text>
							<text class="text price">￥{{item.price.toFixed(2)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import SUPPLIER from "@/data/supplier.js";

	export default {
		data() {
			return {
				id: null,
				keyword: '',
				
				formData: {},
				dataList: [],
				
				scrollTop: 0, // 返回顶部
				sectionFontSize: this.$css.sectionFontSize,
				sectionBold: this.$css.sectionBold,
				sectionColor: this.$css.sectionColor,
				sectionLineColor: this.$css.sectionLineColor,
			}
		},
		onLoad(options = {}) {
			this.initPage(options)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			initPage(options = {}) {
				if(!options.id) return
				
				this.id = options.id;
				this.getData();
				this.getDataList();
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			search(){
				if (config.debug) console.log('搜索', this.keyword)
				vk.toast('搜索' + this.keyword);
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			getData(){
				this.formData = SUPPLIER.find(item => item.id == this.id);
				uni.setNavigationBarTitle({
					title: this.formData.name
				})
			},
			getDataList(){
				this.dataList = [];
			},
			clickMenu(id){
				vk.toast('点击了' + id);
			},
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		},
	}
</script>

<style lang="scss">
	.app {
		
	}
	
	.search-bar{
		color: #fff;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
	}
	
	.section{
		padding: 0 30rpx;
		background-color: #fff;
	}

	.section>.title {
		margin: 50rpx 0;
		font-size: 24px;
		font-weight: 700;
		// text-align: center;
	}
	
	.title-bar .title {
		margin: 20rpx 0;
		font-size: 18px;
		font-weight: 700;
		// text-align: center;
	}
	.title-bar .imglist-item{
		margin: 0;
		height: auto;
		background-color: blue;
		color: #fff;
	}
	.title-bar .thumb{
		weight: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	.title-bar .text-bar{
		justify-content: center;
	}
	
	.grid-item4{
		height: calc((100vw - 15px) / 4);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>